<template>
    <div class="pie-container">
        <div class="chart" id="chart_right1"></div>
    </div>
</template>

<script>
    // 政府部门大屏右1扇形图：各区县产生量占比统计
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin.js'

    export default {
        name: 'pie',
        mixins: [mixinDevice],
        // 父组件传递过来的值
        props: {
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                data: null
            }
        },
        mounted() {
            this.getStatisticsData()
        },
        // 监听器
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getStatisticsData()
            },
        },
        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/getCityWasteNumber', params)
                // console.log('[-----pie返回的数据----]', res.result)
                this.data = res.result || []
                this.getEchartRight1()
            },

            getEchartRight1() {
                let myChart = this.$echarts.init(document.getElementById('chart_right1'))
                let img = ''
                let trafficWay = this.data

                let data = []
                let color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
                for (let i = 0; i < trafficWay.length; i++) {
                    data.push({
                        value: trafficWay[i].sum,
                        name: trafficWay[i].area,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                shadowBlur: 10,
                                borderColor: color[i],
                                shadowColor: color[i]
                            }
                        }
                    })
                }
                let self = this;
                // console.log('data', data)
                let seriesOption = [{
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: self.isMobile() ? [60, 55] : [95, 90],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'outside',
                                color: '#ddd',
                                fontSize: self.isMobile() ? 10 : 12,
                                formatter: function(params) {
                                    let percent = 0
                                    let total = 0
                                    for (let i = 0; i < data.length; i++) {
                                        total += data[i].value
                                    }
                                    // console.log('total:',total);
                                    percent = ((params.value / total) * 100).toFixed(0)
                                    // console.log('percent:',percent);
                                    if (params.name !== '') {
                                        return params.name + '：' + percent + '%'
                                    } else {
                                        return ''
                                    }
                                }
                            },
                            labelLine: {
                                length: 10,
                                length2: 10,
                                show: true,
                                color: '#00ffff'
                            }
                        }
                    },
                    data: data
                }]
                let option = {
                    // backgroundColor: '#0A2E5D',
                    color: color,
                    title: {
                        text: '医废产生量',
                        top: '48%',
                        textAlign: 'center',
                        left: '49%',
                        textStyle: {
                            color: '#fff',
                            fontSize: self.isMobile() ? 12 : 20,
                            fontWeight: '300'
                        }
                    },
                    graphic: {
                        elements: [{
                            type: 'image',
                            z: 3,
                            style: {
                                image: img,
                                width: 170,
                                height: 170
                            },
                            left: 'center',
                            top: 'center'

                        }]
                    },
                    tooltip: {
                        show: false
                    },

                    toolbox: {
                        show: false
                    },
                    series: seriesOption
                }
                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .pie-container {
        .chart {
            height: 3rem;

        }
    }
</style>
